<template>
	<view class="serveView">
		<nav-bar isBack title="在线咨询"></nav-bar>
		<view class="msgListCont" @touchstart="opbar.action='';enterGoods = null;">
			<scroll-view scroll-y="true" class="messagesView" :scroll-top="messagesScrollTop" :scroll-into-view="scrollIntoView" @scroll="scrollEvent" @scrolltoupper="scrolltoupper">
				<view class="tips" v-if="hisData.page===hisData.total">没有更多了</view>
				<view class="tips" :style="{'opacity':hisData.loading?1:0}">加载中...</view>
				<template v-for="(item,index) in messages">
					<view :id="'ele_'+item.ele_id" :key="index">
						<msg-item :msgData="item" :userID="timData.userID" @msgItemTap="msgItemTap"></msg-item>
					</view>
				</template>
			</scroll-view>
		</view>
		
		<view class="opbar" @touchstart="enterGoods = null;">
			<view class="cell1">
				<input type="text" v-model="opbar.input" placeholder="回复点什么" confirm-type="send" @confirm="opbarInputConfirm"/>
				<text class="iconfont iconhuaban52" @tap="opbarBtnTap('emoji')" :class="opbar.action=='emoji' && 'active'"></text>
				<text class="iconfont iconhuaban65"  @tap="opbarBtnTap('menu')" :class="opbar.action=='menu' && 'active'"></text>
			</view>
			<view class="cell2" v-if="opbar.action=='menu'">
				<swiper :duration="500" :current="opbar.menu.current"
					@change="(e)=>{opbar.menu.current = e.detail.current}">
					<swiper-item class="menu-box" v-for="(item1,index1) in menuList" :key="index1">
						<view class="menu-item" v-for="item2 in item1" @tap="menuItemTap(item2.name)">
							<text class="iconfont" :class="item2.icon"></text>
							<text>{{item2.name}}</text>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots">
					<view class="dot" :class="{'active':index == opbar.menu.current}" v-for="(item,index) in menuList"
						:key="index"></view>
				</view>
			</view>
			<view class="cell3" v-if="opbar.action=='emoji'">
				<scroll-view scroll-y="true">
					<text class="emojiItem" v-for="(item,index) in opbar.emoji.list" @tap="opbar.input+=item"
						:key='index'>{{item}}</text>
				</scroll-view>
			</view>
		</view>
		
		<view class="cell-enter-goods" v-if="enterGoods">
			<image class="cover" :src="enterGoods.main_imgurl" style="width: 212rpx;height: 212rpx;"></image>
			<view class="info">
				<view class="info-1">{{enterGoods.product_title}}</view>
				<view class="info-2">{{enterGoods.store_name}}</view>
				<view class="info-3">
					<view>{{enterGoods.volume}}人付款</view>
					<view>
						<text style="text-decoration: line-through;"></text>
						<text style="color: #E9423E;font-size: 32rpx;">￥{{enterGoods.price}}</text>
					</view>
				</view>
			</view>
			<image class="button-send" @tap="sendEnterGoods" src="https://manager.ryz1620.com/static/my/send.png" style="width: 76rpx;height: 212rpx;"></image>
		</view>
		
		<u-popup v-model="shopShow" mode="bottom" height="100%">
			<goods-popup @close="()=>{shopShow=false}"></goods-popup>
		</u-popup>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar"
	import msgItem from "../components/msg-item.vue"
	import goodsPopup from "../components/goods-popup.vue"
	// import TIMSDK from '../js_sdk/tim-sdk/index.js'
	// import TIMUploadPlugin from '../js_sdk/tim-upload-plugin/index.js'
	import customeApi from '@/service/custome.js'
	// let tim = TIMSDK.create({
	// 	SDKAppID: 1400501255
	// });
	// tim.registerPlugin({
	// 	'tim-upload-plugin':TIMUploadPlugin
	// })
	// tim.setLogLevel(1);
	export default {
		components: {
			navBar,
			msgItem,
			goodsPopup
		},
		data() {
			return {
				messages:[],
				messagesScrollTop:0,
				shopShow:false,
				opbar: {
					action: '',
					input: '',
					menu: {
						current: 0,
						list: [
							{"name": "拍照",'icon': "iconhuaban113"},
							{"name": "图片",'icon': "iconhuaban24"},
							// {"name": "快捷语言",'icon': "iconhuaban34"},
							// {"name": "推荐商品",'icon': "iconhuaban43"},
							// {"name": "推荐案例",'icon': "iconhuaban63"},
							// {"name": "推荐商家",'icon': "iconhuaban72"},
							// {"name": "推荐设计师",'icon': "iconhuaban82"},
							// {"name": "推荐施工队",'icon': "iconhuaban92"},
							// {"name": "转客服",'icon': "iconhuaban53"},
						]
					},
					emoji: {
						list: ['😠', '😩', '😲', '😞', '😵', '😰', '😒', '😍', '😤', '😜', '😝', '😋', '😘', '😚', '😷',
							'😳', '😃', '😅', '😆', '😁', '😂', '😊', '😄', '😢', '😭', '😨', '😣', '😡', '😌', '😖',
							'😔', '😱', '😪', '😏', '😓', '😥', '😫', '😉'
						]
					}
				},
				timData: {
					//status: false,
					userID: 'cli_413',
					userSig: 'eJwtjMsKgkAUQP-lrkPuXGd8QYuIHpALMy1oE5OOcVFDTESI-j1Rl*ccOF9IwovVmxYCIAthNTHn5t1xwZPOKn5IYS-pk5e6aTiHQEhEhYKUmosZGm4NBA5KD3F2HdejEQ4Rua4tnOXBr-E73Pb6WPuypJOiuI0Ou22aRE9PFzq7p-G1Cj8bX6i*D89r*P0B7I8wlw__',
					type:0,
					to: 'adm_7',
					kefu_info_name:'客服-工号：7'
				},
				hisData:{
					page: 0,
					pagesize: 20,
					begintime: "",
					endtime: "",
					total:null,
					loading:false,
					ele_id:''
				},
				scrollIntoView:'',
				partner_type:'shop',
				partner_id:18,
				chat_id:7,
				connectRootTimer:null,
				enterGoods:null,
				tpyes:'',
			}
		},
		computed: {
			navHeight() {
				return this.$store.state.system.navBarHeight
			}, // Nav栏高度
			statusBarHeight(){
				let systemInfo =  uni.getSystemInfoSync()
				return systemInfo.statusBarHeight || 0
			},
			menuList() {
				let ary = [];
				this.opbar.menu.list.map((item, index) => {
					let targetIndex = parseInt(index / 8);
					if (!ary[targetIndex]) {
						ary[targetIndex] = []
					}
					ary[targetIndex].push(item)
				})
				return ary
			},
			timMsg(){
				return this.$store.state.tim.msg
			},
		},
		onLoad(options) {
			if(uni.getStorageSync('timInfo')){
				this.timData.userID=uni.getStorageSync('timInfo').userID
				this.timData.userSig=uni.getStorageSync('timInfo').userSig
			}
			if(options.partner_type){
				this.partner_type=options.partner_type
			}
			if(options.partner_id){
				this.partner_id=options.partner_id
			}
			if(options.to){
				this.timData.to=options.to
			}
			if(options.tpyes){
				this.tpyes = options.to
			}
			if(options.chat_id){
				this.chat_id=options.chat_id;
				this.timData.type = 1;
				this.getChatHis();
			}else{
				this.getEnter();
			}
			this.setEnterGoods()
			//15秒内无消息转平台客服
			// this.connectRootTimer = setTimeout(()=>{
			// 	this.connectRoot();
			// },15000)
		},
		onShow() {
			this.$utils.getUrl()
			if(!this.$store.state.tim.status){
				if(uni.getStorageSync('token')){
					let tk = uni.getStorageSync('token');
					this.$store.commit('index/token','');
					this.$store.commit('index/token',tk);
				}
			}
		},
		methods: {
			getEnter(){
				customeApi.enter({
					partner_type:this.partner_type,
					partner_id:this.partner_id,
				}).then(res=>{
					if(res.code==1){
						this.chat_id = res.data.chat_id;
						this.timData.type = res.data.type;
						if(res.data.type == 1){
							this.getChatHis();
							this.timData.kefu_info_name = res.data.kefu_info.name;
							this.timData.to = res.data.kefu_account;
						}else{
							this.getWelcomeData();
						}
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			getWelcomeData(){
				customeApi.welcome({
					partner_type:this.partner_type,
					partner_id:this.partner_id,
				}).then(res=>{
					if(res.code==1){
						this.chat_id=res.data.chat_id;
						let p={
							payload:{
								data: JSON.parse(res.data.msg_content).Data,
								description: JSON.parse(res.data.msg_content).Desc,
								extension: '猜你想问'
							},
							ID:'',
							from:'welcome'
						}
						this.messages.push(p);
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			getQuestionbyidUser(chat_id,content){
				customeApi.questionbyidUser({
					chat_id,
					content
				}).then(res=>{
					if(res.code==1){
						let p={
							payload:{
								data: JSON.parse(res.data.msg_content).Data,
								description: JSON.parse(res.data.msg_content).Desc,
								extension: '以下选项请选择'
							},
							ID:'',
							from:'questionbyid'
						}
						this.messages.push(p)
						this.$nextTick(()=>{
							this.isScrollBottom(true)
						})
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			getQuestionbyidData(chat_id,knowledge_id){
				customeApi.questionbyid({
					chat_id,
					knowledge_id
				}).then(res=>{
					if(res.code==1){
						let p={
							payload:{
								data: JSON.parse(res.data.msg_content).Data,
								description: JSON.parse(res.data.msg_content).Desc,
								extension: '以下选项请选择'
							},
							ID:'',
							from:'questionbyid'
						}
						this.messages.push(p)
						this.$nextTick(()=>{
							this.isScrollBottom(true)
						})
						// console.log(JSON.parse(JSON.parse(res.data.msg_content).Data).is_human)
						if(JSON.parse(JSON.parse(res.data.msg_content).Data).is_human=='1'){
							this.getConnect();
						}
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			//获取客服信息
			getConnect(){
				customeApi.connect({
					chat_id:this.chat_id
				}).then(res=>{
					if(res.code==1 && res.data.status==1){
						// this.timData.userID=res.data.im_user;
						this.timData.to=res.data.kefu_account;
						// this.timData.userSig=res.data.sig;
						this.timData.kefu_info_name = res.data.kefu_info.name || '客服'
						this.createTempMsg(this.timData.kefu_info_name,`{"chat_id":${this.chat_id},"format":"system"}`,this.getUuid())
						// uni.setStorageSync('timDataInfo',{
						// 	...this.timData,
						// 	status:false
						// })
						// this.timLoginEvent()
						this.timData.type = 1;
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			connectRoot(){
				this.createTempMsg("转平台客服",`{"chat_id":${this.chat_id},"format":"system"}`,this.getUuid());
				customeApi.connectRoot({
					chat_id:this.chat_id
				}).then(res=>{
					if(res.code==1 && res.data.status==1){
						this.timData.to=res.data.kefu_account;
						this.timData.kefu_info_name = res.data.kefu_info.name || '客服'
						// this.createTempMsg(this.timData.kefu_info_name,`{"chat_id":${this.chat_id},"format":"system"}`,this.getUuid())
						this.timData.type = 1;
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			//登录TIM
			timLoginEvent() {
				let promise = tim.login({
					userID: this.timData.userID,
					userSig: this.timData.userSig
				});
				promise.then((imResponse) => {
					this.timData.status = true;
					this.createTempMsg(this.timData.kefu_info_name,`{"chat_id":${this.chat_id},"format":"system"}`,this.getUuid())
					if (imResponse.data.repeatLogin === true) {
						// 标识账号已登录，本次登录操作为重复登录。v2.5.1 起支持
						console.log(imResponse.data.errorInfo);
					}
					// this.messages = [];
					tim.on(this.$tim.sdk.EVENT.MESSAGE_RECEIVED, this.timMessageReceived);
				}).catch((imError)=> {
					this.timData.status = false;
					console.warn('login error:', imError); // 登录失败的相关信息
				});
			},
			timMessageReceived(event) {
				if (event.name == "onMessageReceived") {
					console.log(event)
					event.data.map(item=>{
						if(item.payload.data === "客服切换"){
							this.getConnect();
						}else{
							if(item.from == "administrator" || item.from==this.timData.to){
								this.messages.push(item)
							}
						}
					})
				}
			},
			async timSendImg(imgdata){
				let teampIndex = await this.createTempImg(imgdata);
				let message = this.$tim.tim.createImageMessage({
				    to: this.timData.to,
				    conversationType: this.$tim.sdk.TYPES.CONV_C2C,
				    payload: { file: imgdata },
				    onProgress: function(event) { console.log('file uploading:', event) }
				});
				// 3. 发送图片
				let promise = this.$tim.tim.sendMessage(message);
				promise.then((imResponse)=> {
					this.$set(this.messages,teampIndex,imResponse.data.message);
				}).catch((imError)=> {
					let item= this.messages[teampIndex];
					item.sendFail=true;
					item.sending=false;
					this.$set(this.messages,teampIndex,item);
				});
			},
			//发送自定义消息
			timSendMsg(data,description,extension) {
				if(typeof data == "object"){
					data=JSON.stringify(data)
				}
				if(typeof description == "object"){
					description=JSON.stringify(description)
				}
				if(typeof extension == "object"){
					extension=JSON.stringify(extension)
				}
				let message = this.$tim.tim.createCustomMessage({
					to: this.timData.to,
					conversationType: this.$tim.sdk.TYPES.CONV_C2C,
					payload: {
						data:data || '',
						description: description || '',
						extension: extension || ''
					}
				});
				this.createTempMsg(data,description,extension);
				let promise2 = this.$tim.tim.sendMessage(message);
				promise2.then((imResponse) => {
					for(let i = this.messages.length -1 ; i>=0;i--){
						let item = this.messages[i];
						if(item && item.sending && item.payload.extension == imResponse.data.message.payload.extension){
							this.$set(this.messages,i,imResponse.data.message);
							break;
						}
					}
				}).catch((imError) => {
					for(let i = this.messages.length -1 ; i>=0;i--){
						let item = this.messages[i];
						if(item && item.sending && item.payload.extension == extension){
							item.sendFail=true;
							item.sending=false;
							this.$set(this.messages,i,item);
							break;
						}
					}
				});
			},
			//加载中占位消息
			createTempMsg(data,description,extension){
				let p={
					payload:{
						data,
						description,
						extension
					},
					ID:'',
					sending:true,
					sendFail:false,
					from:this.timData.userID
				}
				this.messages.push(p);
			},
			//加载中占位图片消息
			async createTempImg(imgdata){
				let url =imgdata.tempFilePaths[0];
				let width=0,height=0;
				let info = ( await uni.getImageInfo({src: imgdata.tempFilePaths[0]}) )[1];
				width = info.width;
				height = info.height;
				let p={
					payload:{
						imageFormat:3,
						imageInfoArray:[
							{
								url,
								width,
								height
							},
							{
								url,
								width,
								height
							}
						],
						uuid:'',
						extension:this.getUuid()
					},
					ID:'',
					sending:true,
					sendFail:false,
					from:this.timData.userID,
					type:'TIMImageElem',
				}
				this.messages.push(p);
				return this.messages.length-1
			},
			//重发自定义消息
			resendMsg(parms){
				for(let i = this.messages.length -1 ; i>=0;i--){
					let item = this.messages[i];
					if(item && item.sendFail && item.payload.extension == parms.payload.extension){
						this.messages.splice(i,1);
						this.timSendMsg(parms.payload.data,parms.payload.description,parms.payload.extension);
						break;
					}
				}
			},
			// 重发图片
			resendImg(parms){
				for(let i = this.messages.length -1 ; i>=0;i--){
					let item = this.messages[i];
					if(item && item.sendFail && item.type=='TIMImageElem' && item.payload.extension == parms.payload.extension){
						this.messages.splice(i,1);
						this.timSendImg({
							tempFilePaths:[parms.payload.imageInfoArray[0].url]
						})
						break;
					}
				}
			},
			// 内容确认事件
			opbarInputConfirm(event){
				let value = event.target.value || event;
				let chat_id = this.chat_id;
				if(!this.timData.type){
					this.getQuestionbyidUser(chat_id,value);
					let p={
						payload:{
							data:value,
							description:JSON.stringify({chat_id,format:'string'}),
							extension:this.getUuid()
						},
						ID:'',
						sending:false,
						sendFail:false,
						from:this.timData.userID
					}
					this.messages.push(p);
				}else{
					if(!this.$store.state.tim.status){
						uni.showToast({
							title: '正在连接',
							duration: 2000,
							icon:'none'
						});
						
						uni.getStorage({
							key: 'timInfo',
							success: (res) => {
								this.$tim.login(res.userID, res.userSig)
							}
						});
						return
					}
					this.timSendMsg(value,{chat_id,format:'string'},this.getUuid())
				}
				this.opbar.input=''
			},
			// 键盘菜单点击事件
			menuItemTap(type){
				if(type=="图片"){
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album'], //从相册选择
					    success:(res)=> {
							this.timSendImg(res)
					    }
					});
					return
				}
				if(type=="拍照"){
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['camera'], //从相册选择
					    success:(res)=> {
							this.timSendImg(res)
					    }
					});
					return
				}
				if(type=="推荐商品"){
					this.shopShow=true
				}
			},
			// 消息项点击事件传递
			msgItemTap(type,parms){
				if(type=='LIST_ITEM'){
					if(parms.url){
						uni.navigateTo({
							url:parms.url
						})
					}else{
						this.getQuestionbyidData(parms.chat_id,parms.id);
					}
					return
				}
				if(type=='MSG_FAIL'){
					uni.showModal({
					    title: '提示',
					    content: '是否重发?',
					    success:(res)=> {
					        if (res.confirm) {
								this.resendMsg(parms)
					        } else if (res.cancel) {}
					    }
					});
					return
				}
				
				if(type=='IMG_FAIL'){
					uni.showModal({
					    title: '提示',
					    content: '是否重发?',
					    success:(res)=> {
					        if (res.confirm) {
								this.resendImg(parms)
					        } else if (res.cancel) {}
					    }
					});
					return
				}
				
				if(type == 'GOODS'){
					uni.navigateTo({
						url:`/pages_mall/pages/mall/goods_details/goods_details?id=${parms.product_id}`
					})
					return
				}
				if(type == 'CASE'){
					uni.navigateTo({
						url:`/pages_design/pages/design/demo/demo?caseId=` + parms.id
					})
					return
				}
				if(type == 'STORE'){
					uni.navigateTo({
						url:'/pages_mall/pages/mall/store/store?storeId=' + parms.store_id
					})
					return
				}
				if(type == 'DESIGNER'){
					uni.navigateTo({
						url:'/pages_design/pages/design/personal/personal?designerId=' + parms.id
					})
					return
				}
				if(type == 'TEAM'){
					uni.navigateTo({
						url:'/pages_two/pages/construction/detailes/index?designerId=' + parms.id
					})
					return
				}
			},
			// 生成uuid
			getUuid() {
			    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
			        var r = Math.random() * 16 | 0,
			            v = c == 'x' ? r : (r & 0x3 | 0x8);
			        return v.toString(16);
			    });
			},
			isScrollBottom(flag){
				let view = uni.createSelectorQuery().in(this).select(".messagesView");
				if (!view) {
					return
				}
				let toBottom = 0;
				view.fields({
					size: true,
					scrollOffset: true
				}, data => {
					toBottom = data.scrollHeight - data.scrollTop - data.height;
					if(toBottom<100 || flag){
						this.$nextTick(()=>{
							this.messagesScrollTop = data.scrollHeight;
						})
					}
				}).exec();
			},
			opbarBtnTap(type){
				if(!this.timData.type){
					uni.showToast({
					    title: '请先链接人工客服!',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				this.opbar.action=this.opbar.action==type?'':type
			},
			getChatHis(type='init'){
				if(this.hisData.loading) return ;
				if(type!='init' && !this.hisData.endtime){
					return
				}
				this.hisData.loading = true;
				customeApi.chatHis({
					chat_id: this.chat_id, 
					page: this.hisData.page+1,
					pagesize: this.hisData.pagesize,
					begintime: this.hisData.begintime,
					endtime: this.hisData.endtime
				}).then(res=>{
					if(res.code==1){
						if(res.data.list.length<1){
							return
						}
						if(this.messages[0]){
							this.hisData.ele_id = this.messages[0].ele_id;
						}
						this.hisData.page = this.hisData.page + 1;
						this.hisData.total = Math.ceil(res.data.total/this.hisData.pagesize);
						
						res.data.list.map(item=>{
							item.ele_id = this.getUuid();
							this.messages.unshift(item)
						})
						if(type == 'init'){
							this.hisData.endtime = res.data.list[0].time || "";
							this.$nextTick(()=>{
								this.isScrollBottom(true)
							})
							return
						}
						if(type = "history"){
							this.$nextTick(()=>{
								if(this.hisData.ele_id){
									this.scrollIntoView = "ele_"+this.hisData.ele_id
								}
							})
						}
					}
				}).catch(err=>{
					
				}).finally(r=>{
					setTimeout(()=>{
						this.hisData.loading = false;
					},800)
				})
			},
			scrolltoupper(){
				if(this.hisData.page===this.hisData.total){
					return
				}
				this.getChatHis('history');
			},
			scrollEvent(event){
				if(event.detail.scrollTop>50){
					this.hisData.ele_id = "";
				}
			},
			setEnterGoods(){
				if(this.partner_type!=='shop' || this.partner_type =='shop' && this.tpyes == 1){
					return
				}
				let localGoodsInfo = uni.getStorageSync('localGoodsInfo');
				if(!localGoodsInfo){
					return
				}
				this.enterGoods = localGoodsInfo;
				uni.removeStorageSync('localGoodsInfo');
			},
			//发送推荐商品
			sendEnterGoods(){
				let chat_id = this.chat_id;
				if(this.timData.to){
					this.timSendMsg(this.enterGoods,{chat_id,format:'goods'},this.getUuid());
				}
				// customeApi.questionbyidUser({
				// 	chat_id:chat_id,
				// 	content:this.enterGoods.product_id,
				// 	type:2
				// })
				this.enterGoods = null;
			}
		},
		
		watch: {
			messages(newVal,oldVal) {
				this.isScrollBottom()
			},
			timMsg(newVal,oldVal){
				if(newVal){
					if(newVal.payload.data === "客服切换"){
						this.getConnect();
					}else{
						if(newVal.from == "administrator" || newVal.from==this.timData.to){
							if(this.connectRootTimer){
								clearTimeout(this.connectRootTimer);
								this.connectRootTimer = null;
							}
							this.messages.push(newVal)
						}
					}
				}
			}
		},
		onUnload() {
			clearTimeout(this.connectRootTimer);
			this.connectRootTimer = null;
		}
	}
</script>

<style lang="scss">
	@import "../components/cl-uni/index.scss";
	@import "../components/cl-uni/theme.scss";
	page {
		width: 100%;
		height: 100%;
	}

	.serveView {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #F8F8F8;

		.msgListCont {
			flex: 1;
			min-height: 0;
			overflow-y: hidden;

			scroll-view {
				width: 100%;
				height: 100%;
			}
			.tips{
				font-size: 28rpx;
				padding: 5rpx 0;
				text-align: center;
				color: #666;
			}
		}

		.opbar {
			background: #fff;
			position: relative;
			.cell1 {
				width: 100%;
				height: 112rpx;
				display: flex;
				align-items: center;

				input {
					background: #F8F8F8;
					border-radius: 50rpx;
					padding-left: 20rpx;
					flex: 1;
					height: 64rpx;
					margin: 0 20rpx;
				}

				.iconfont {
					font-size: 50rpx;
					margin-right: 20rpx;
					text-align: center;
					color: #6C6C6C;

					&.active {
						color: #C3AB7C;
					}
				}
			}

			.cell2 {
				width: 100%;
				height: 452rpx;
				background: #FFFFFF;
				position: relative;

				.menu-box {
					display: flex;
					flex-wrap: wrap;

					.menu-item {
						width: 25%;
						display: flex;
						align-items: center;
						flex-direction: column;
						font-size: 20rpx;
						color: #939393;

						.iconfont {
							width: 104rpx;
							background-color: #F8F8F8;
							height: 104rpx;
							line-height: 104rpx;
							text-align: center;
							font-size: 56rpx;
							color: #6C6C6C;
							margin-bottom: 12rpx;
							border-radius: 16rpx;
						}
					}
				}

				.dots {
					position: absolute;
					bottom: 20rpx;
					width: 100%;
					display: flex;
					justify-content: center;
					z-index: 99;
					align-items: center;

					.dot {
						width: 12rpx;
						height: 12rpx;
						background: #6C6C6C;
						border-radius: 50%;
						opacity: 0.2;
						margin: 0 5rpx;

						&.active {
							opacity: 1;
						}
					}
				}
			}

			.cell3 {
				height: 452rpx;

				scroll-view {
					height: 100%;

					.emojiItem {
						display: block;
						float: left;
						text-align: center;
						width: calc(100% / 6);
						font-size: 60rpx;
						margin: 14rpx 0;
					}
				}
			}
		}
		.cell-enter-goods{
			position: fixed;
			bottom: 122rpx;
			left: 0;
			width: 100vw;
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 212rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			image.cover{
				width: 212rpx !important;
				height: 212rpx !important;
			}
			&>.info{
				flex: 1;
				padding: 16rpx 22rpx;
				.info-1{
					color: #1A1C20;
					font-size: 28rpx;
					margin-bottom: 10rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.info-2{
					color: #939393;
					font-size: 22rpx;
					margin-bottom: 10rpx;
				}
				.info-3{
					font-size: 22rpx;
					display: flex;
					align-items: center;
					color: #939393;
					justify-content: space-between;
				}
			}
			&>.button-send{
				display: block;
				width: 76rpx;
				height: 212rpx;
			}
		}
	}
</style>
